<div class="bui-page">
    <header id="header" class="bui-bar">
        <div class="bui-bar-left">
            <a class="bui-btn btn-back"><i class="icon-back"></i></a>
        </div>
        <div class="bui-bar-main">按钮</div>
        <div class="bui-bar-right">
        </div>
    </header>
    <main class="container-x">
        <h3 class="section-title">
            <a name="p1"></a>普通按钮 class="bui-btn"</h3>
        <div class="bui-interval">
            <div class="bui-btn">默认按钮</div>
            <div class="bui-btn mini">超小按钮 mini</div>
            <div class="bui-btn small">小按钮 small</div>
            <div class="bui-btn large">中按钮 large</div>
            <div class="bui-btn xlarge">大按钮 xlarge</div>
            <div class="bui-btn xxlarge">超大按钮 xxlarge</div>
            <div class="bui-btn round">小圆角按钮 round</div>
            <div class="bui-btn ring">圆角按钮 ring</div>
        </div>
        <div class="section-title">颜色配置</div>
        <div class="bui-interval">
            <div class="bui-btn primary"><i class="icon-info"></i>primary</div>
            <div class="bui-btn info"><i class="icon-success"></i>info</div>
            <div class="bui-btn success"><i class="icon-success"></i>success</div>
            <div class="bui-btn danger"><i class="icon-error"></i>danger</div>
            <div class="bui-btn warning"><i class="icon-warning"></i>warning</div>
            <div class="bui-btn default"><i class="icon-success"></i>default</div>
            <div class="section-title">禁止状态</div>
            <div class="bui-btn disabled">disabled</div>
            <div class="bui-btn primary disabled">primary disabled</div>
            <div class="bui-btn info disabled">info disabled</div>
            <div class="bui-btn success disabled">success disabled</div>
            <div class="bui-btn warning disabled">warning disabled</div>
            <div class="bui-btn danger disabled">danger disabled</div>


            <div class="bui-btn primary reverse"><i class="icon-info"></i>primary reverse</div>
            <div class="bui-btn info reverse"><i class="icon-info"></i>info reverse</div>
            <div class="bui-btn success reverse"><i class="icon-info"></i>success reverse</div>
            <div class="bui-btn danger reverse"><i class="icon-info"></i>danger reverse</div>
            <div class="bui-btn warning reverse"><i class="icon-info"></i>warning reverse</div>
            <div class="bui-btn default reverse"><i class="icon-info"></i>default reverse</div>
        </div>
        <h3 class="section-title">
            <a name="p2"></a>结合布局的图标按钮 class="bui-btn bui-box"</h3>
        <div class="bui-btn bui-box">
            <i class="icon-fav"></i>
            <div class="span1">图标左对齐按钮</div>
        </div>

        <h3 class="section-title">
            <a name="p3"></a>带数字+图标按钮</h3>
        <div class="bui-btn bui-box">
            <div class="span1">
                按钮图标
            </div>
            <div class="bui-badges">15</div>
            <i class="icon-listright"></i>
        </div>
        <div class="bui-btn bui-box">
            <div class="icon"><img src="images/applogo.png" alt=""></div>
            <div class="span1">
                按钮图标+数字
            </div>
            <div class="bui-badges">15</div>
            <i class="icon-listright"></i>
        </div>
        <div class="bui-btn bui-box">
            <div class="icon">
                <img src="images/applogo.png" alt="">
                <div class="bui-badges"></div>
            </div>
            <div class="span1">
                按钮图标+数字
            </div>
            <i class="icon-listright"></i>
        </div>
        <div class="section-title">按钮组</div>
        <div class="bui-interval">
            <ul class="bui-group mini">
                <li class="bui-btn primary">按钮1</li>
                <li class="bui-btn">按钮2</li>
                <li class="bui-btn">按钮3</li>
            </ul>
            <ul class="bui-group round small">
                <li class="bui-btn primary">按钮1</li>
                <li class="bui-btn">按钮2</li>
                <li class="bui-btn">按钮3</li>
            </ul>
            <ul class="bui-group ring small">
                <li class="bui-btn primary">按钮1</li>
                <li class="bui-btn">按钮2</li>
                <li class="bui-btn">按钮3</li>
            </ul>
        </div>
        <br>
    </main>
</div>